import 'package:flutter/material.dart';

class TabBarPage extends StatefulWidget {
  const TabBarPage({super.key});

  @override
  State<TabBarPage> createState() => _TabBarPageState();
}

//一、混入SingleTickerProviderStateMixin
class _TabBarPageState extends State<TabBarPage>
    with SingleTickerProviderStateMixin {
  //二、定义_tabController
  late TabController _tabController;

  //三、定义tab列表
  List<Tab> tabList = [
    const Tab(text: '推荐'),
    const Tab(text: '热点'),
    const Tab(text: '视频'),
    const Tab(text: '图片'),
    const Tab(text: '直播'),
    const Tab(text: '专栏'),
    const Tab(text: '工具'),
    const Tab(text: '更多'),
  ];

  //四、页面初始化时初始化_tabController
  @override
  void initState() {
    super.initState();
    //length: 标签数量  vsync: 上下文环境
    _tabController = TabController(length: tabList.length, vsync: this);
  }

  //五、页面销毁时释放_tabController
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _tabController.dispose();
  }

  //六、定义 TabBar
  Widget tabBar() {
    Widget body = TabBar(
      controller: _tabController, //选项卡控制器
      tabs: tabList, //tab选项卡列表
      isScrollable: true, //是否可以滚动
      tabAlignment: TabAlignment.start, //去除选项卡左右padding
      indicatorColor: Colors.orange, //指示器颜色
      padding: const EdgeInsets.only(bottom: 3), //TabBar内边距设置
      indicatorSize: TabBarIndicatorSize.label, //指示器样式
      indicatorPadding: const EdgeInsets.symmetric(horizontal: 2), //指示器内边距设置
      indicatorWeight: 2, //指示器高度
      //选项卡文字样式
      labelColor: Colors.orange, //选中的文本颜色
      //选中的文本样式，如果不设置未选中文本样式,则此样式应用到所有label文本
      labelStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      //未选中的文本颜色
      unselectedLabelStyle:
          const TextStyle(fontSize: 16, fontWeight: FontWeight.normal),
      unselectedLabelColor: Colors.grey,
      labelPadding: const EdgeInsets.symmetric(horizontal: 10), //选项卡之间的间距
      dividerColor: Colors.grey, //选项卡分割线颜色
      dividerHeight: 0, //选项卡分割线高度
    );
    return body;
  }

  //七、定义 TabBar View
  List<Widget> tabBarViewList = [
    //也可以定义页面
    const Center(child: Text('推荐')),
    const Center(child: Text('热点')),
    const Center(child: Text('视频')),
    const Center(child: Text('图片')),
    const Center(child: Text('直播')),
    const Center(child: Text('专栏')),
    const Center(child: Text('工具')),
    const Center(child: Text('更多')),
  ];

  //八、绑定TabBar到AppBar
  AppBar appbar() {
    AppBar body = AppBar(
      title: const Text('TabBarPage',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
      centerTitle: true,
      bottom: PreferredSize(
          preferredSize: const Size.fromHeight(40), child: tabBar()),
    );
    return body;
  }

  //九、绑定TabBarView到body
  Widget body() {
    Widget body = TabBarView(
      controller: _tabController,
      children: tabBarViewList,
    );
    return body;
  }

  //十、绑定 AppBar 和 body 到 Scaffold
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: appbar(), body: body());
  }
}
